 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$Think.config.site.title} - 商品详情</title>
    <meta name="keywords" content="{$Think.config.site.keywords}">
    <link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.min.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="{$Think.config.site.common_resource_url}js/swiper/swiper.min.css" rel="stylesheet">
<style type="text/css">
	body{background: #eee}
	ul{margin: 0; padding: 0}
	ul li{list-style: none;}
	.padding{padding:10px;}
	.color-bg{background: #fff}
	.mb{margin-bottom: 5px;}

	.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open .dropdown-toggle.btn-primary{
		background-color: #0dbe08;
	    border-color: #0dbe08;
	    color: #FFF;
	}
	.btn-primary {
	    background-color: #0dbe08;
	    border-color: #0dbe08;
	    color: #FFF;
	}

	.banner{height: 198px; text-align: center;}
	.banner img{width: 100%;}

	.goodsname{
		/*height: */
	}
	.goodsname .brand{
		display: inline-block;
		padding: 0px 5px;
		background: #f1b348;
		border-radius: 5px;
		font-size: 12px;
		color: #fff;
		margin-right: 10px;
	}
    .goodsname .name{
		display: inline-block;
		margin: 0px;
		font-size: 14px;
	}

	.specval{}
	.specval ul{overflow: auto; border-bottom: 1px solid #ccc}
	.specval ul li{ display: inline-block;  border-radius: 5px; font-size:12px; padding: 4px 10px; border:1px solid #ccc; color: #ccc; margin-bottom: 15px; margin-left: 15px;}
	.specval ul li.active{border:1px solid rgb(13, 190, 8); color: rgb(13, 190, 8);}

	.specval_name_box{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		align-items:center;
	}
	.specval_name_left{
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
	}
	.specval_name_item{display: none;}
	.specval_name{color: #f00}

	.detail{}
</style>
</head>
<body>
    <div class="mbody">
		<div class="swiper-container banner">
	        <div class="swiper-wrapper">
	        	{volist name="goods['img_lists']" id='v'}
	        	<div class="swiper-slide"><img src="{$v}"></div>
	        	{/volist}
	        </div>
	    </div>
    	<div class="goodsname padding color-bg mb">
    		<span class="brand">{$goods.brand_name}</span>
    		<p class="name">{$goods.goods_name}</p>
    	</div>
    	<div class="specval padding color-bg mb">
    		<p>选择规格</p>
    		<ul class="mb">
    			{volist name="specval" id="vo"}
    				<li class="" data-goods_id="{$vo.goods_id}" data-specval_id="{$vo.specval_id}">{$vo.spec_name}/{$vo.specval_name}</li>
    			{/volist}
    		</ul>
    		<div class="specval_name_box">
    			<div class="specval_name_left">
    				{volist name="specval" id="vo"}
    				<div class="specval_name_item">
    					<p class="specval_name">￥{$vo.price}/{$vo.spec_name}/{$vo.specval_name}</p>
    					{if($vo['unit_price']!='0.00')} <p class="spec_name">￥{$vo.unit_price}/{$vo.unit}</p>{/if}
    				</div>
    				{/volist}
    			</div>
    			<div>
    				<button class="btn btn-primary btn-xs addcart">加入购物车</button>
    			</div>
    		</div>
    	</div>
    	<div class="detail padding color-bg mb">
    		<p>详情信息</p>
    		<div style="padding-left: 15px;">
    			{$goods.description}
    		</div>
    	</div>
    </div>

    <style type="text/css">
		.mbody{position: relative; margin-bottom: 46px;}
		.mfooter{ position: fixed; width: 100%; height: 45px; bottom: 0; left: 0; background: #fff; z-index: 10; }
		.fnav-box{  width: 100%; height: 100%; display:-webkit-box;display:-webkit-flex;display:flex; align-items:center;
}
		.fnav{
			display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
			-webkit-box-flex:1;
			-webkit-flex:1;
			flex:1;
			padding: 0 25px;
		}
		.allcheck{
			-webkit-box-flex:1;
			-webkit-flex:1;
			flex:1;
		}
		.gocart{width: 80px; background: #0dbe08; height: 100%; line-height: 45px; color: #fff; text-align: center;}
		.cartNum{color: rgb(255, 78, 78)}
	</style>
	<div class="mfooter">
		<div class="fnav-box">
			<div class="fnav">
				<div class="" >
					购物车数量：<span class="cartNum">{$num}</span>
				</div>
			</div>
			<a href="{:url('cart/index',['shop_id'=>$shop_id])}"><div class="gocart">购物车</div></a>
		</div>
	</div>
	<script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>
	<script src="{$Think.config.site.resource_url}js/plugins/layer/layer.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/majax.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/swiper/swiper.min.js"></script>
	<script type="text/javascript">
		$('.specval ul li').click(function(){
			$(this).addClass('active').siblings('li').removeClass('active');
			$('.specval_name_item').eq($(this).index()).show().siblings('.specval_name_item').hide();
		})
		$('body').delegate('.addcart','click',function(){

			var liAct = $('.specval ul li.active');
			if (liAct.length!=1) {
				layer.msg('规格错误');
				return false;
			}
			var specval_id = liAct.data('specval_id'),goods_id = liAct.data('goods_id'),o=$(this);
			o.removeClass('addcart');
			majax('{:url("Cart/edit",["shop_id"=>$shop_id])}',{specval_id:specval_id,goods_id:goods_id},function(d){

				o.addClass('addcart');
				if (d.code>0) {
					var cartNum = parseInt($('.cartNum').text());
					if (isNaN(cartNum)) {cartNum=0}
					$('.cartNum').show().text(cartNum+1);
				}else{

				}
			},{autoload:false,automsg:false})
		})
		$(function(){
			$('.specval ul li:eq(0)').click();
			$('.banner').height($('.banner img:eq(0)').height());
			setTimeout(function(){var swiper = new Swiper('.swiper-container');},500)
		})
		$(window).resize(function() {
		  $('.banner').height($('.banner img:eq(0)').height());
		});
	</script>
</body>
</html>